<template>
<view>
<!--index.wxml-->
<!-- 用户信息开始 -->
<view class="container">
<view class="user_info">
  <image src="/static/images/distribut/team_bg@2x.png"></image>
    <view class="index-right">
      <navigator url="/pages/distribut/set_store/set_store">
        <image class="index-set" src="/static/images/icon_setteing.png"></image>
      </navigator>
    </view>
  <view class="wrap">
    <view class="user_info_header">
      <image :src="data.user.head_pic?data.user.head_pic:defaultAvatar"></image>
      <view class="details">
        <view class="details_title">{{data.user.nickname}}
        <!-- <image src="{{data.user.head_pic?data.user.head_pic:defaultAvatar}}"></image> -->
        </view>              
        <view class="details_content">{{data.distribut_level}}</view>

        <view class="details_time" v-if="store">开店时间：{{store.store_time}}</view>
        <navigator class="details_time" v-if="!store" url="/pages/distribut/set_store/set_store">创建店铺</navigator>
      </view>
    </view>
    <view class="info_data">
      <view class="commission">
        <view class="sum">{{data.user.distribut_money|| '0.00'}}</view>
        <view class="writing">累计佣金</view>
      </view>
      <view class="income">
        <view class="sum">{{data.money.today_money|| '0.00'}}</view>
        <view class="writing">今日收入</view>
      </view>
      <view class="total">
        <view class="sum">{{data.user.user_team_order.total_amount|| '0.00'}}</view>
        <view class="writing">总销售额</view>
      </view>
    </view>
  </view>
</view>
<!-- 用户信息结束 -->
<!-- 提现金额模块开始 -->
<view class="withdraw wrap">
  <view class="brokerage_able">
    <view class="brokerage_able_data">
      <view class="data_sum">{{data.user.withdraw || '0.00'}}</view>
      <view class="data_content">可提现佣金（元）</view>
    </view>
    <navigator class="btn" url="/pages/distribut/team_commission/team_commission">申请提现</navigator>
  </view>
    <view class="brokerage_success">
    <view class="data_sum">{{data.user.withdrawing|| '0.00'}}</view>
    <view class="data_content">提现中（元）</view>
  </view>
  <view class="brokerage_success">
    <view class="data_sum">{{data.user.distribut_withdrawals_money}}</view>
    <view class="data_content">成功提现金额（元）</view>
  </view>
</view>
<!-- 提现金额模块结束 -->
<!-- 导航模块开始 -->
<view class="nav wrap clearfix">
    <view @tap.stop="distributTopages" data-idx="3" class="nav_list">
        <view class="image_box" style="background-color: #ff6a00">
        <image src="/static/images/distribut/retail_order@2x.png" class="nav_icon1"></image>
        </view>
        <view class="nav_detail">
            <view class="nav_detail_content">团队订单</view>
            <view class="nav_detail_sum">{{data.user.user_team_order.order_count||0}} 笔       </view>
        </view>
    </view>

  <navigator class="nav_detail" url="/pages/distribut/team_commission/team_commission">
    <view class="nav_list">
        <view class="image_box" style="background-color: #f6a60c">
            <image src="/static/images/distribut/retail_brokerage@2x.png" class="nav_icon2"></image>
        </view>
        <navigator class="nav_detail" url="/pages/distribut/team_commission/team_commission">
            <view class="nav_detail_content">团队佣金</view>
            <view style="color:ff3939;" class="nav_detail_sum">￥{{data.user.rebate_money||0}}</view>
        </navigator>
    </view>
 </navigator>

   <view @tap.stop="distributTopages" data-idx="1" class="nav_list">
        <view class="image_box" style="background-color: #3db4ff">
        <image src="/static/images/distribut/retail_control@2x.png" class="nav_icon3"></image>
        </view>
        <view class="nav_detail">
            <view class="nav_detail_content">我的下线</view>
            <view class="nav_detail_sum">{{data.user.user_team_order.user_count||0}} 人</view>
        </view>
  </view>

    <navigator class="nav_detail" url="/pages/user/withdrawals_list/withdrawals_list?type=1">
        <view class="nav_list">
            <view class="image_box" style="background-color: #3ed126">
                <image src="/static/images/distribut/retail_withdraw@2x.png" class="nav_icon4"></image>
            </view>
            <navigator class="nav_detail" url="/pages/user/withdrawals_list/withdrawals_list?type=1">
              <view class="nav_detail_content">提现明细</view>
                <view class="nav_detail_sum">{{data.user.rebate_log||0}} 笔</view>
            </navigator>
        </view>
    </navigator>
</view>
<!-- 导航模块结束 -->
<!-- 其他信息模块开始 -->
<view class="others wrap">
 <navigator class="others_function" url="../../distribut/good_list/good_list">
    <image src="/static/images/distribut/retail_rank@2x.png" class="function_icon" style="width:36rpx;height:30rpx"></image>
    <view class="others_content">分销商品</view>
    <image src="/static/images/xr_3.png" class="next_icon"></image>
  </navigator>
  <view class="others_function" @tap.stop="distributSee">
    <image src="/static/images/distribut/retail_help@2x.png" class="function_icon" style="width:33rpx;height:37rpx"></image>
    <view class="others_content">新手必看</view>
    <image src="/static/images/xr_3.png" class="next_icon"></image>
  </view>
   <navigator class="others_function" url="../../distribut/poster/poster">
    <image src="/static/images/distribut/retail_cardd@2x.png" class="function_icon" style="width:37rpx;height:32rpx"></image>
    <view class="others_content">推广海报</view>
    <image src="/static/images/xr_3.png" class="next_icon"></image>
  </navigator>
</view>
<!-- 其他信息模块结束 -->
</view>


<!-- 底部菜单 -->
<!--<import src="../../index/publics/publics.wxml"></import>-->
<block data-type="template" data-is="distributMenu" data-attr="page:page">
<!-- 底部菜单 -->
<view class="pos_fixed">
    <!-- 我的分销底部导航 -->
    <view class="tpd-footer tpd-footer1">
        <view hover-class="none" @tap.stop="distributTopages" data-idx="0" :class="page == 0?'tpd-footer-select':''"><image :src="page == 0?'/images/distribut/seller_red@2x.png':'/images/distribut/seller_black@2x.png'"></image><text>分销中心</text></view>
        <view hover-class="none" @tap.stop="distributTopages" data-idx="1" :class="page == 1?'tpd-footer-select':''"><image style="width:59rpx;" :src="page == 1?'/images/distribut/team_red@2x.png':'/images/distribut/team_black@2x.png'"></image><text>我的团队</text></view>
        <view hover-class="none" @tap.stop="distributTopages" data-idx="2" :class="page == 2?'tpd-footer-select':''"><image :src="page == 2?'/images/distribut/money_red@2x.png':'/images/distribut/money_black@2x.png'"></image><text>我的账户</text></view>
        <view hover-class="none" @tap.stop="distributTopages" data-idx="3" :class="page == 3?'tpd-footer-select':''"><image :src="page == 3?'/images/distribut/order_red@2x.png':'/images/distribut/order_black@2x.png'"></image><text>分销订单</text></view>
        <view hover-class="none" @tap.stop="distributTopages" data-idx="4" :class="page == 4?'tpd-footer-select':''"><image :src="page == 4?'/images/distribut/shop_red@2x.png':'/images/distribut/shop_black@2x.png'"></image><text>我的网店</text></view>
    </view>
  </view>
</block>
</view>
</template>

<script>
//index.js
var app = getApp();
var request = app.globalData.request;
var setting = app.globalData.setting;
var common = require("../../../utils/common.js");
var util = require("../../../utils/util.js");

export default {
  data() {
    return {
      data: null,
      defaultAvatar: setting.resourceUrl + "/static/static/images/user68.jpg",
      webUrl: '',
      page: 0,
      store: null
    };
  },

  components: {},
  props: {},
  //事件处理函数
  onShow: function () {
    this.getDistribut();
    this.getStore();
  },
  methods: {
    getStore: function () {
      var that = this;
      request.post('/api/Distribut/get_store', {
        successReload: true,
        success: function (res) {
          if (res.data.result) {
            res.data.result.store_time = util.format(res.data.result.store_time, 'yyyy-MM-dd');
            that.setData({
              store: res.data.result
            });
          }
        }
      });
    },
    getDistribut: function () {
      var that = this;
      request.post('/api/Distribut/index', {
        successReload: true,
        success: function (res) {
          res.data.result.user.head_pic = common.getFullUrl(res.data.result.user.head_pic);
          that.setData({
            data: res.data.result
          });
        }
      });
    },

    /** 新手必看 */
    distributSee: function () {
      this.setData({
        webUrl: "/api/Article/agreement?doc_code=create_circle"
      });
      uni.navigateTo({
        url: '/pages/index/webview/webview'
      });
    },
    distributTopages: function (e) {
      common.todistribut(e.currentTarget.dataset.idx, this.page);
    }
  }
};
</script>
<style>
page {
  background-color: #f5f5f5;
}
.clearfix:after{
  content: '.';
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  clear: both;
}
.wrap {
  width: 100%;
  box-sizing: border-box
}
.user_info {
  height: 300rpx;
  color: #fff;
  position: relative;
}
.user_info > image {
  position: absolute;
  width: 100%;
  height: 300rpx;
  z-index: -1;
}
.user_info .user_info_header {
  height: 170rpx;
  overflow: hidden;
}
.user_info .user_info_header > image {
  width: 130rpx;
  height: 130rpx;
  border-radius: 50%;
  float:left;
  margin-top: 24rpx;
  margin-left: 20rpx;
}
.user_info .user_info_header .details {
  width: 100%;
  padding-left: 170rpx;
  margin-top: 40rpx;
}
.user_info .user_info_header .details .details_title {
  font-size: 30rpx;
  margin-bottom: 18rpx;
  position: relative;
  font-weight: bold;
}
.user_info .user_info_header .details .details_title image {
  position: absolute;
  top: 10rpx;
  left: 134rpx;
  width: 26rpx;
  height: 24rpx;
}
.user_info .user_info_header .details .details_content {
  font-size: 24rpx;
  float: left;
}
.user_info .user_info_header .details .details_time {
  float: right;
  font-size: 24rpx;
  margin-right: 190rpx;
}
.user_info .info_data > view {
  float: left;
  text-align: center;
  margin-top: 45rpx;
  box-sizing: border-box;
  width: 33.333%;
  height: 30rpx;
  border-right: 1px solid rgba(255,255,255,.7);
}
.user_info .info_data > view:last-child {
  border-right: 0;
}
.user_info .info_data > view .sum {
  margin-top: -17rpx;
  height: 30rpx;
  line-height: 30rpx;
  font-size: 34rpx;
  font-weight: 600;
}
.user_info .info_data > view .writing {
  margin-top: 10rpx;
  font-size: 26rpx;
}
.withdraw {
  background-color: #fff;
  /* padding: 0 30rpx; */
  width: 710rpx;
  margin: 0 auto;
  margin-top: 20rpx;
  margin-right: 20rpx;
  border-radius: 10rpx;
}
.withdraw .brokerage_able {
  height: 154rpx;
  padding: 0 30rpx;
  border-bottom: 1px solid #f3f3f3;
  overflow: hidden;
}
.withdraw .brokerage_able .brokerage_able_data {
  margin-top: 34rpx;
  float: left;
  margin-left: 10rpx;
}
.withdraw .data_sum {
  font-size: 42rpx;
  color: #fe4646;
  font-weight: bold;
}
.withdraw .data_content {
  font-size: 24rpx;
  color: #1c1c1c;
}
.withdraw .brokerage_able .btn {
  float: right;
  width: 130rpx;
  height: 48rpx;
  border-radius: 24rpx;
  background-color: #FB3838;
  color: #fff;
  font-size: 22rpx;
  line-height: 48rpx;
  text-align: center;
  margin-top: 60rpx;
  margin-right: 10rpx;
  opacity:.9;
}
.withdraw .brokerage_success {
  height: 136rpx;
  padding-left: 40rpx;
  padding-top: 22rpx;
  box-sizing: border-box;
  overflow: hidden;
  width: 50%;
  float: left;
}

.nav {
  background-color: #fff;
  width: 710rpx;
  margin: 0 auto;
  margin-top: 20rpx;
  border-radius: 10rpx;
}
.nav .nav_list {
  float: left;
  width: 50%;
  box-sizing: border-box;
  padding-bottom: 28rpx;
  padding-top: 30rpx;
  border-right: 1px solid #f3f3f3;
  border-bottom: 1px solid #f3f3f3;
  padding-left: 40rpx
}
.nav .nav_list .nav_detail {
  margin-left: 26rpx;
  float: left;
}
.nav .nav_list .nav_detail .nav_detail_content {
  font-size: 28rpx;
  color: #1c1c1c;
  display: block;
}
.nav .nav_list .nav_detail .nav_detail_sum {
  font-size: 24rpx;
  color: #666;
  margin-top: 10rpx;
}
.nav .nav_list:nth-child(2) {

  border-right: 0;
}
.nav .nav_list:nth-child(3) {
  border-bottom: 0;
}
.nav .nav_list:nth-child(4) {

  border: 0;
}
.nav .nav_list .image_box {
  height: 64rpx;
  width: 64rpx;
  border-radius: 50%;
  float: left;
  margin-top: 6rpx;
  position: relative;
}
.nav .nav_list .image_box > image {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%)
}
.nav .nav_list .image_box .nav_icon1 {
  width: 30rpx;
  height: 34rpx;
}
.nav .nav_list .image_box .nav_icon2 {
  width: 34rpx;
  height: 36rpx;
}
.nav .nav_list .image_box .nav_icon3 {
  width: 35rpx;
  height: 41rpx;
}
.nav .nav_list .image_box .nav_icon4 {
  width: 35rpx;
  height: 34rpx;
}

.others {
  background-color: #fff;
  width: 710rpx;
  margin: 0 auto;
  margin-top: 20rpx;
  border-radius: 10rpx;
}
.others .others_function {
  height: 92rpx;
  border-bottom: 1px solid #f3f3f3;
  overflow: hidden;
}
.others .others_function:last-child {
  border-bottom: 0;
}
.others .others_function .others_content {
  font-size: 28rpx;
  color: #1c1c1c;
  float: left;
  margin-left: 15rpx;
  height: 100%;
  line-height: 92rpx;
}
.others .others_function .function_icon {
  float: left;
  margin-left: 20px;
  margin-top: 30rpx
}
.others .others_function .next_icon {
  float: right;
  width: 32rpx;
  height: 32rpx;
  margin-top: 30rpx;
  margin-right: 15rpx
}
.index-right{
    float: right;
    position:absolute;
    right:30rpx;
    margin-top: 20rpx;
}
.index-set{
    width: 56rpx;
    height: 56rpx;
}
</style>